import React from 'react'
import './photo.css'


function Photo() {
   
    const categories = [
      { title: '自然风景', images: ['https://ts1.cn.mm.bing.net/th?id=OIP-C.HVdWPbF8w9RDzR_VFdskegAAAA&w=250&h=250&c=8&rs=1&qlt=90&r=0&o=6&dpr=1.5&pid=3.1&rm=2', 'https://wx1.sinaimg.cn/orj360/008qHdHygy1hsdxzg17sdj30rs0rsq8l.jpg'] },
      { title: '餐饮美食', images: ['https://wx4.sinaimg.cn/orj360/008qHdHygy1hsdxzgrcitj30rs0rsn3k.jpg', 'https://wx1.sinaimg.cn/orj360/008qHdHygy1hsdxzhrwvfj30rs0rsqce.jpg'] },
      { title: '建筑', images: ['https://wx1.sinaimg.cn/orj360/008qHdHygy1hsdxzi7fodj30rs0rstcp.jpg', 'https://wx4.sinaimg.cn/orj360/008qHdHygy1hsdxzinik1j30rs0rswio.jpg'] },
      { title: '人像', images: ['https://wx2.sinaimg.cn/orj360/008qHdHygy1hsdxzizqkdj30rs0rs0xr.jpg', 'https://wx2.sinaimg.cn/orj360/008qHdHygy1hsdxzjllaqj30rs0rs0xx.jpg'] }
  ];

   
    return (
        <div className='pho_box'>
      {categories.map((category, index) => (
        <div key={index} className={`pho-${category.title === '自然风景'? 'nature' : category.title === '餐饮美食'? 'foot' : category.title === '建筑'? 'build' : 'person'}`}>
          <div className='pho-title'>
            <h3>{category.title}</h3>
            <span>全部<i className='iconfont icon-youjiantou' /></span>
          </div>
          <div className='pho-img'>
            {category.images.map((src, imgIndex) => (
              <img
                draggable="true"
                key={imgIndex}
                src={src}
                alt={category.title}
                onDragStart={(e) => {
                  e.dataTransfer.setData('image', JSON.stringify(src));
                }}
              />
            ))}
          </div>
        </div>
      ))}
    </div>
    )
}

export default Photo